<template>
	<view>
		<!-- 车辆信息 -->
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in car" :key="index" @click="click"
			:options="options" class="wrap" bg-color="#f8f8f8" btn-width=120>
			<view class="car">
				<!-- 车辆图片 -->
				<view class="carImg">
					<image src="../static/image/car/black.png" v-if="item.color == '黑色'"></image>
					<image src="../static/image/car/white.png" v-else-if="item.color == '白色'"></image>
					<image src="../static/image/car/gray.png" v-else-if="item.color == '灰色'"></image>
					<image src="../static/image/car/gloden.png" v-else-if="item.color == '金色'"></image>
					<image src="../static/image/car/black.png" v-else></image>
				</view>
				<!-- 车辆信息 -->
				<view class="carInfo">
					<view class="carNum">
						{{item.car_num}}
					</view>
					<!-- 车辆类型 -->
					<view class="carType">
						{{item.car_type}}
					</view>
					<!-- 车辆颜色 -->
					<view class="carColor">
						{{item.color}}
					</view>
				</view>
			</view>
		</u-swipe-action>
		<!-- 添加车辆 -->
		<u-button :custom-style="customStyle" @click="gotoAddCar" class="button">
			添加车辆
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 1,
				car: [], //车辆数据
				// 滑动操作
				options: [
					// {
					// 	text: '编辑',
					// 	style: {
					// 		backgroundColor: '#0081ff',
					// 		height: '200rpx',
					// 		width: '120rpx',
					// 		marginTop: '20rpx'
					// 	}
					// },
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d',
							height: '200rpx',
							marginTop: '20rpx'
						}
					}
				],
				// 添加车辆按钮属性
				customStyle: {
					width: '82%',
					height: '90rpx',
					fontSize: '36rpx',
					marginTop: '80rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#FFFFFF',
					backgroundColor: '#48adff',
					borderRadius: '50rpx'
				}
			};
		},
		methods: {
			// 获取车辆数据
			getCarList() {
				this.$u.api.getCarList().then(
					res => {
						// console.log(res)
						this.car = res.data
						for (let i; i < this.car.length; i++) {
							this.car[i].show = false
						}
					}).catch(err => {
					console.log(err)
				})
			},


			click(index, index1) {
				console.log(index)
				// 删除车辆
				this.$u.api.deleteCar({
					car_num: this.car[index].car_num
				}).then(res => {
					this.getCarList()
				})
				this.$u.toast(`删除成功`);
				// 编辑车辆
				// else {
				// 	this.car[index].show = false;
				// 	this.$u.route({
				// 		url: '/pages/car/modifyCar',
				// 		params: {
				// 			carNum: this.car[index].car_num,
				// 			carColor: this.car[index].color,
				// 			carType: this.car[index].car_type
				// 		}
				// 	})
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			// open(index) {
			// 	// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 	// 原本为'false'，再次设置为'false'会无效
			// 	this.car[index].show = true;
			// 	this.car.map((val, idx) => {
			// 		if (index != idx) this.car[idx].show = false;
			// 	})
			// }
			gotoAddCar() {
				this.$u.route('pages/car/addCar')
			}
		},
		mounted() {
			this.getCarList()
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100%;
		margin: 0 9%;

		.car {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			// border-radius: 30rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			border-radius: 10rpx;


			// border: 2rpx solid #909399;

			.carImg {
				image {
					width: 280rpx;
					height: 200rpx;
				}
			}

			.carInfo {
				padding-left: 40rpx;

				.carNum {
					font-size: 36rpx;
					color: $base-color;
				}

				.carType {
					padding-top: 10rpx;
				}
			}
		}

	}
</style>
